<template>
  <Layout class="template-wrap">
    <PageHeader :class="getHeaderClass" title="编辑模板" @back="() => router.go(-1)">
      <template #subTitle>
        <Steps v-model:current="currentSteps" :items="contractStepsList" />
      </template>
      <template #extra>
        <Space :class="`${prefixCls}-right pr-2`" :size="10">
          <a-button
            v-for="(item, index) in contractStepsList[currentSteps]?.headerTool || []"
            :key="index"
            v-bind="item"
          >
            {{ item.text }}
          </a-button>
        </Space>
      </template>
    </PageHeader>

    <KeepAlive>
      <component :is="contractStepsList[currentSteps].content" />
    </KeepAlive>
  </Layout>
</template>

<script lang="ts" setup>
  import { useHeaderSetting } from '@/hooks/setting/useHeaderSetting';
  import { useAppInject } from '@/hooks/web/useAppInject';
  import { useDesign } from '@/hooks/web/useDesign';
  import { Layout, PageHeader, Space, Steps } from 'ant-design-vue';
  import { computed, onMounted, ref, unref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import TemplateBasicInfo from './components/TemplateBasicInfo.vue';
  import VFormDesign from '@/views/contract/template/components/template-form-design/components/VFormDesign/index.vue';
  import { getContractTemplateInfoApi } from '@/api/contract/template';
  import { createPDFViewContext } from '../pdf-view/hooks/usePDFViewContext';

  defineOptions({
    name: 'ContractTemplate',
  });

  onMounted(async () => {
    const res = await getContractTemplateInfoApi(route.params.id);
    console.log(res);

    contractPdfInfo.value = res;
  });

  const router = useRouter();
  const route = useRoute();
  const { prefixCls } = useDesign('layout-header');
  const { getIsMobile } = useAppInject();
  const { getHeaderTheme } = useHeaderSetting();

  // @ts-ignore
  const contractClass: Ref<ContractCanvasClass> = ref();
  const currentSteps = ref(0);
  /** pdf合同签署信息 */
  const contractPdfInfo = ref();

  const { state } = createPDFViewContext({
    contractClass,
    contractPdfInfo,
    validateForm: async () => {},
  });

  const contractStepsList = [
    {
      title: '模板基础信息',
      content: TemplateBasicInfo,
      headerTool: [
        {
          text: '下一步',
          type: 'primary',
          iconSize: 18,
          async onClick() {
            await state.validateForm();
            currentSteps.value += 1;
          },
        },
      ],
    },
    {
      title: '设置模板控件',
      content: VFormDesign,
      disabled: true,
      headerTool: [
        {
          text: '上一步',
          type: 'default',
          iconSize: 18,
          onClick() {
            currentSteps.value -= 1;
          },
        },
        {
          text: '保存模板',
          type: 'primary',
          iconSize: 18,
          onClick() {},
        },
      ],
    },
  ];

  const getHeaderClass = computed(() => {
    const theme = unref(getHeaderTheme);
    return [
      prefixCls,
      {
        [`${prefixCls}--fixed`]: true,
        [`${prefixCls}--mobile`]: unref(getIsMobile),
        [`${prefixCls}--${theme}`]: theme,
      },
    ];
  });
</script>

<style lang="less" scoped>
  @import url('@/layouts/default/header/index.less');

  ::v-deep(.ant-steps-item-icon) {
    line-height: 29px;
  }

  .ant-page-header {
    width: 100%;

    ::v-deep(&-heading) {
      padding-left: 30px;
      width: 100%;

      &-left {
        flex: 1;
      }

      &-sub-title {
        margin: 0 auto;
        width: 30%;
      }
    }
  }

  .template-wrap {
    padding-top: @header-height;
  }
</style>
